<template>
    <div class="dashboard-container">
      <!-- 欢迎标题 -->
      <div class="welcome-header">
        <h2>欢迎登录课工场新闻管理系统</h2>
        <p class="welcome-subtitle">今天是 {{ currentDate }}，祝您工作愉快！</p>
      </div>
  
      数据概览卡片
      <div class="overview-cards">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
              <div class="card-content">
                <div class="stat-icon user-icon">
                  <el-icon><User /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-title">用户总数</div>
                  <div class="stat-value">{{ dashboardData.userCount }}</div>
                  <div class="stat-trend">
                    <span :class="dashboardData.userTrend >= 0 ? 'up' : 'down'">
                      {{ dashboardData.userTrend >= 0 ? '↑' : '↓' }} {{ Math.abs(dashboardData.userTrend) }}%
                    </span>
                    较上月
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
              <div class="card-content">
                <div class="stat-icon news-icon">
                  <el-icon><Document /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-title">新闻总数</div>
                  <div class="stat-value">{{ dashboardData.newsCount }}</div>
                  <div class="stat-trend">
                    <span :class="dashboardData.newsTrend >= 0 ? 'up' : 'down'">
                      {{ dashboardData.newsTrend >= 0 ? '↑' : '↓' }} {{ Math.abs(dashboardData.newsTrend) }}%
                    </span>
                    较上月
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
              <div class="card-content">
                <div class="stat-icon comment-icon">
                  <el-icon><ChatDotRound /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-title">评论总数</div>
                  <div class="stat-value">{{ dashboardData.commentCount }}</div>
                  <div class="stat-trend">
                    <span :class="dashboardData.commentTrend >= 0 ? 'up' : 'down'">
                      {{ dashboardData.commentTrend >= 0 ? '↑' : '↓' }} {{ Math.abs(dashboardData.commentTrend) }}%
                    </span>
                    较上月
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
              <div class="card-content">
                <div class="stat-icon ad-icon">
                  <el-icon><DataLine /></el-icon>
                </div>
                <div class="stat-info">
                  <div class="stat-title">广告总数</div>
                  <div class="stat-value">{{ dashboardData.adCount }}</div>
                  <div class="stat-trend">
                    <span :class="dashboardData.adTrend >= 0 ? 'up' : 'down'">
                      {{ dashboardData.adTrend >= 0 ? '↑' : '↓' }} {{ Math.abs(dashboardData.adTrend) }}%
                    </span>
                    较上月
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      
      <!-- 图表和任务区域 -->
      <div class="chart-task-area">
        <el-row :gutter="20">
          <!-- 数据图表 -->
          <el-col :span="16">
            <el-card shadow="hover" class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>数据趋势</span>
                  <el-select v-model="chartTimeRange" size="small" style="width: 120px">
                    <el-option label="最近7天" value="7"></el-option>
                    <el-option label="最近30天" value="30"></el-option>
                    <el-option label="最近90天" value="90"></el-option>
                  </el-select>
                </div>
              </template>
              <div id="main-chart" style="height: 300px;"></div>
            </el-card>
          </el-col>
          
          <!-- 近期任务 -->
          <el-col :span="8">
            <el-card shadow="hover" class="task-card">
              <template #header>
                <div class="card-header">
                  <span>近期审核任务</span>
                  <el-button type="text" @click="refreshTasks">刷新</el-button>
                </div>
              </template>
              <div class="task-list">
                <div v-for="(task, index) in pendingTasks" :key="index" class="task-item">
                  <div class="task-info">
                    <div class="task-title">{{ task.title }}</div>
                    <div class="task-meta">
                      <span class="task-author">{{ task.author }}</span>
                      <span class="task-time">{{ task.time }}</span>
                    </div>
                  </div>
                  <div class="task-actions">
                    <el-button size="small" type="success" @click="approveTask(task.id)">通过</el-button>
                    <el-button size="small" type="danger" @click="rejectTask(task.id)">拒绝</el-button>
                  </div>
                </div>
                <el-empty v-if="pendingTasks.length === 0" description="暂无待审核任务"></el-empty>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      
      <!-- 系统通知和快捷操作 -->
      <div class="notice-quick-area">
        <el-row :gutter="20">
          <!-- 系统通知 -->
          <el-col :span="12">
            <el-card shadow="hover" class="notice-card">
              <template #header>
                <div class="card-header">
                  <span>系统通知</span>
                  <el-button type="text" @click="markAllAsRead">全部已读</el-button>
                </div>
              </template>
              <div class="notice-list">
                <div v-for="(notice, index) in systemNotices" :key="index" 
                     class="notice-item" :class="{unread: !notice.read}">
                  <div class="notice-icon">
                    <el-icon :color="notice.type === 'warning' ? '#e6a23c' : notice.type === 'error' ? '#f56c6c' : '#67c23a'">
                      <component :is="notice.icon"></component>
                    </el-icon>
                  </div>
                  <div class="notice-content">
                    <div class="notice-title">{{ notice.title }}</div>
                    <div class="notice-desc">{{ notice.description }}</div>
                    <div class="notice-time">{{ notice.time }}</div>
                  </div>
                </div>
                <el-empty v-if="systemNotices.length === 0" description="暂无系统通知"></el-empty>
              </div>
            </el-card>
          </el-col>
          
          <!-- 快捷操作 -->
          <el-col :span="12">
            <el-card shadow="hover" class="quick-card">
              <template #header>
                <div class="card-header">
                  <span>快捷操作</span>
                </div>
              </template>
              <div class="quick-actions">
                <el-row :gutter="20">
                  <el-col :span="8" v-for="(action, index) in quickActions" :key="index">
                    <div class="quick-action-item" @click="handleQuickAction(action.path)">
                      <div class="action-icon">
                        <el-icon :size="30" :color="action.color">
                          <component :is="action.icon"></component>
                        </el-icon>
                      </div>
                      <div class="action-title">{{ action.title }}</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import { useRouter } from 'vue-router'
  import * as echarts from 'echarts'
  import {
    User, Document, ChatDotRound, DataLine,
    CircleCheck, CircleClose, InfoFilled, BellFilled
  } from '@element-plus/icons-vue'
  
  const router = useRouter()
  
  // 当前日期
  const currentDate = ref('')
  const updateCurrentDate = () => {
    const date = new Date()
    currentDate.value = date.toLocaleDateString('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
      weekday: 'long'
    })
  }
  
  // 控制台数据
  const dashboardData = ref({
    userCount: 12543,
    userTrend: 12.5,
    newsCount: 8765,
    newsTrend: 8.2,
    commentCount: 32456,
    commentTrend: -3.4,
    adCount: 342,
    adTrend: 23.1
  })
  
  // 图表数据
  const chartTimeRange = ref('7')
  let chartInstance = null
  
  // 任务数据
  const pendingTasks = ref([
    { id: 1, title: '关于人工智能的最新研究进展', author: '张研究员', time: '10分钟前' },
    { id: 2, title: '2023年全球气候变化报告', author: '李记者', time: '25分钟前' },
    { id: 3, title: '城市交通拥堵解决方案', author: '王专家', time: '1小时前' }
  ])
  
  // 系统通知
  const systemNotices = ref([
    { id: 1, title: '系统维护通知', description: '系统将于本周日凌晨2:00-4:00进行维护升级', type: 'warning', icon: BellFilled, time: '2023-05-15 14:30', read: false },
    { id: 2, title: '新版本发布', description: '系统v2.1.0版本已发布，请及时更新', type: 'info', icon: InfoFilled, time: '2023-05-14 09:15', read: true },
    { id: 3, title: '安全提醒', description: '检测到异常登录尝试，请检查账户安全', type: 'error', icon: CircleClose, time: '2023-05-13 18:45', read: false }
  ])
  
  // 快捷操作
  const quickActions = ref([
    { title: '发布新闻', icon: Document, color: '#409EFF', path: '/apinews/add' },
    { title: '用户审核', icon: User, color: '#67C23A', path: '/apiusers/list' },
    { title: '广告管理', icon: DataLine, color: '#E6A23C', path: '/op/ad' },
    { title: '评论审核', icon: ChatDotRound, color: '#F56C6C', path: '/comments' },
    { title: '数据统计', icon: DataLine, color: '#909399', path: '/dashboard' },
    { title: '系统设置', icon: CircleCheck, color: '#909399', path: '/settings' }
  ])
  
  // 初始化图表
  const initChart = () => {
    const chartDom = document.getElementById('main-chart')
    if (!chartDom) return
    
    chartInstance = echarts.init(chartDom)
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        data: ['用户数', '新闻数', '评论数', '广告数']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '用户数',
          type: 'line',
          data: [120, 132, 101, 134, 90, 230, 210],
          smooth: true,
          lineStyle: {
            width: 3,
            color: '#409EFF'
          },
          itemStyle: {
            color: '#409EFF'
          }
        },
        {
          name: '新闻数',
          type: 'line',
          data: [220, 182, 191, 234, 290, 330, 310],
          smooth: true,
          lineStyle: {
            width: 3,
            color: '#67C23A'
          },
          itemStyle: {
            color: '#67C23A'
          }
        },
        {
          name: '评论数',
          type: 'line',
          data: [150, 232, 201, 154, 190, 330, 410],
          smooth: true,
          lineStyle: {
            width: 3,
            color: '#E6A23C'
          },
          itemStyle: {
            color: '#E6A23C'
          }
        },
        {
          name: '广告数',
          type: 'line',
          data: [320, 332, 301, 334, 390, 330, 320],
          smooth: true,
          lineStyle: {
            width: 3,
            color: '#F56C6C'
          },
          itemStyle: {
            color: '#F56C6C'
          }
        }
      ]
    }
    chartInstance.setOption(option)
  }
  
  // 刷新图表数据
  const refreshChart = () => {
    // 这里应该根据chartTimeRange的值从API获取数据
    // 模拟数据刷新
    if (chartInstance) {
      const option = chartInstance.getOption()
      option.series.forEach(series => {
        series.data = series.data.map(() => Math.round(Math.random() * 500))
      })
      chartInstance.setOption(option)
    }
  }
  
  // 任务操作
  const approveTask = (id) => {
    // 调用API审核通过
    pendingTasks.value = pendingTasks.value.filter(task => task.id !== id)
  }
  
  const rejectTask = (id) => {
    // 调用API审核拒绝
    pendingTasks.value = pendingTasks.value.filter(task => task.id !== id)
  }
  
  const refreshTasks = () => {
    // 调用API刷新任务列表
    pendingTasks.value = [
      { id: 4, title: '新提交的科技新闻', author: '赵编辑', time: '刚刚' },
      { id: 5, title: '体育赛事报道', author: '钱记者', time: '5分钟前' }
    ]
  }
  
  // 通知操作
  const markAllAsRead = () => {
    systemNotices.value.forEach(notice => {
      notice.read = true
    })
  }
  
  // 快捷操作
  const handleQuickAction = (path) => {
    router.push(path)
  }
  
  onMounted(() => {
    updateCurrentDate()
    initChart()
    
    // 监听窗口大小变化，重新调整图表大小
    window.addEventListener('resize', () => {
      if (chartInstance) {
        chartInstance.resize()
      }
    })
  })
  
  // 监听图表时间范围变化
  watch(chartTimeRange, () => {
    refreshChart()
  })
  
  onUnmounted(() => {
    if (chartInstance) {
      chartInstance.dispose()
    }
    window.removeEventListener('resize', () => {})
  })
  </script>
  
  <style scoped>
  .dashboard-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .welcome-header {
    background-color: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
    text-align: center;
  }
  
  .welcome-header h2 {
    color: #1890ff;
    margin-bottom: 1rem;
    font-size: 1.8rem;
  }
  
  .welcome-subtitle {
    color: #666;
    font-size: 1.1rem;
  }
  
  /* 数据概览卡片 */
  .stat-card {
    margin-bottom: 20px;
    border-radius: 8px;
  }
  
  .card-content {
    display: flex;
    align-items: center;
  }
  
  .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
  }
  
  .stat-icon.user-icon {
    background-color: rgba(64, 158, 255, 0.1);
    color: #409EFF;
  }
  
  .stat-icon.news-icon {
    background-color: rgba(103, 194, 58, 0.1);
    color: #67C23A;
  }
  
  .stat-icon.comment-icon {
    background-color: rgba(230, 162, 60, 0.1);
    color: #E6A23C;
  }
  
  .stat-icon.ad-icon {
    background-color: rgba(245, 108, 108, 0.1);
    color: #F56C6C;
  }
  
  .stat-info {
    flex: 1;
  }
  
  .stat-title {
    font-size: 14px;
    color: #909399;
    margin-bottom: 5px;
  }
  
  .stat-value {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 5px;
  }
  
  .stat-trend {
    font-size: 12px;
    color: #909399;
  }
  
  .stat-trend .up {
    color: #67C23A;
  }
  
  .stat-trend .down {
    color: #F56C6C;
  }
  
  /* 卡片头部样式 */
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  /* 任务列表样式 */
  .task-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background-color: #f9f9f9;
    border-radius: 4px;
  }
  
  .task-info {
    flex: 1;
  }
  
  .task-title {
    font-weight: 500;
    margin-bottom: 4px;
  }
  
  .task-meta {
    font-size: 12px;
    color: #909399;
    display: flex;
    gap: 10px;
  }
  
  .task-actions {
    display: flex;
    gap: 8px;
  }
  
  /* 通知列表样式 */
  .notice-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  
  .notice-item {
    display: flex;
    padding: 12px;
    background-color: #f9f9f9;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .notice-item.unread {
    background-color: #f0f7ff;
  }
  
  .notice-icon {
    margin-right: 12px;
    font-size: 20px;
  }
  
  .notice-content {
    flex: 1;
  }
  
  .notice-title {
    font-weight: 500;
    margin-bottom: 4px;
  }
  
  .notice-desc {
    font-size: 13px;
    color: #606266;
    margin-bottom: 4px;
  }
  
  .notice-time {
    font-size: 12px;
    color: #909399;
  }
  
  /* 快捷操作样式 */
  .quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .quick-action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
    transition: all 0.3s;
    border-radius: 4px;
  }
  
  .quick-action-item:hover {
    background-color: #f5f7fa;
    transform: translateY(-3px);
  }
  
  .action-icon {
    margin-bottom: 10px;
  }
  
  .action-title {
    font-size: 14px;
  }
  
  .chart-card {
    margin-bottom: 20px;
  }
  
  .task-card {
    margin-bottom: 20px;
  }
  
  .notice-card, .quick-card {
    margin-bottom: 20px;
  }
  </style>